<template>
	<view class="content">
		<input class="content__input" v-model="mobile" type="text" placeholder="请输入您的用户名" />
		<input class="content__input" v-model="phone" type="text" placeholder="请输入您注册时填写的手机号" />
		<view class="content__code">
			<input class="content__input" v-model="code" type="text" placeholder="请输入验证码" />
			<view class="send" @click="sendSms">{{!isSend ? '发送验证码':`${sec}秒后重试`}}</view>
		</view>
		<view class="content__pwd">
			<input class="content__input" v-show="!isViewPwd" type="password" v-model="password" placeholder="设置新密码" />
			<input class="content__input" v-show="isViewPwd" type="text" v-model="password" placeholder="设置新密码" />
			<image src="../../../static/images/login/view_pwd.png" @click="viewPwd"></image>
		</view>
		<view class="content__pwd">
			<input class="content__input" v-show="!isViewConfirmPwd" type="password" v-model="confirmPassword" placeholder="确认新密码" />
			<input class="content__input" v-show="isViewConfirmPwd" type="text" v-model="confirmPassword" placeholder="确认新密码" />
			<image src="../../../static/images/login/view_pwd.png" @click="viewConfirmPwd"></image>
		</view>
		<button class="content__btn" @click="confirm">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSend: false,
				sec: 60,
				sendId: 0,
				mobile: '',
				phone: '',
				code: '',
				password: '',
				confirmPassword: '',
				isViewPwd: false,
				isViewConfirmPwd: false,
			}
		},
		methods: {
			sendSms() {
				if (this.isSend) {
					return;
				}
				this.$api.get(
					"/addons/yun_shop/api.php?route=member.register.mappsendCodeV2&mobile=" +
					this.phone + "&reset=1&sms_type=2").then(res => {
					if (res.result == 1) {
						uni.showToast({
							title: "验证码已发送",
							icon: "none"
						});
						this.isSend = true;
						this.sendId = setInterval(() => {
							if (this.sec > 0) {
								this.sec--;
							} else {
								this.sec = 60;
								this.isSend = false;
								clearInterval(this.sendId);
							}
						}, 1000)
					}
				})
			},
			viewPwd () {
				this.isViewPwd = !this.isViewPwd;
			},
			viewConfirmPwd () {
				this.isViewConfirmPwd = !this.isViewConfirmPwd;
			},
			confirm() {
				if (this.password != this.confirmPassword) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					});
					return;
				}
				let params = {
					mobile: this.mobile,
					code: this.code,
					phone: this.phone,
					confirm_password: this.confirmPassword,
					password: this.password
				}
				this.$api.post(
					'/addons/yun_shop/api.php?route=member.register.mappchangePassword',
					params).then(res => {
					if (res.result == 1) {
						uni.navigateTo({
							url: "/pages/personal/login/login"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './forgot-password.scss'
</style>
